<template>
  <div class="banner">
    <img :src="bannerImg" alt="">
    <h3>{{title}}</h3>
  </div>
</template>

<script>
export default {
  name: "ProductBanner",
  props:{
    bannerImg:{
      type:String,
      default:""
    },
    title:{
      type:String,
      default:""
    }
  }
}
</script>

<style scoped lang="scss">
.banner{
  position: relative;
  img{
    width:100%;
    height:220px;
    object-fit: cover;
  }
  h3{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    color:white;
    font-size:30px;
  }
}
</style>
